<template>
  <div id="area">
    <van-popup
      v-model="isShow"
      position="bottom"
      :style="{ height: '70%' }"
      round
    >
      <van-area
        title="配送至"
        :area-list="areaList"
        ref="myArea"
        @cancel="onCancel"
        @change="onChange"
        @confirm="onConfirm"
        :columns-num="3"
      />
    </van-popup>
  </div>
</template>
<script>
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      isShow: false,
      areaList,
      newArea: "",
    };
  },
  methods: {
    //取消选中城市
    onCancel() {
      this.isShow = false;
      this.$refs.myArea.reset();
    },
    onChange(picker, index, value) {
      let val = picker.getValues();
     
      let areaName = "";
      for (var i = 0; i < val.length; i++) {
        areaName = areaName + val[i].name;
      }
      this.newArea = areaName;
      
      this.toParent();
    },
    toParent() {
      this.$emit("getArea", this.newArea);
    },
    onConfirm(val) {
      console.log(val[0].name  + val[1].name+ val[2].name);
      this.toParent();
      this.isShow = false; //关闭弹框
    },
  },
};
</script>